`<template>
  <div class="config">
    <!-- 通讯记录 -->
    <div class="default-tabs">
      <!-- @tab-click="loadData"  -->
      <el-tabs v-model="activeName" type="card" mode="horizontal">
        <el-tab-pane label="导入" name="1" />

      </el-tabs>
      <div class="view-content">
        <!--客户配置 BaseConfig-->
        <div v-if="activeName == 1" class="base-config">
          <div class="content">
            <el-row>
              <el-col :span="20" class='col'>
                <div class='content-table' v-loading="BaseConfig.Reason.tableLoading">
                  <div class="row clearfix">
                    <div class="row-item fl">

                    </div>
                    <div class="row-item fr" style="position: relative">
                      <el-button type="primary">导入</el-button>
                      <input class='file' type="file" @change="ReasonImport" />
                    </div>
                    <div class="row-item fr">
                      <el-button type="primary" @click="FnBatchDelete">批量删除</el-button>
                    </div>
                    <div class="row-item fr">
                      <el-button type="primary" @click="append({})">新增</el-button>
                    </div>
                  </div>
                  <div class='tree-wrap'>
                    <el-tree :data="treeData" show-checkbox node-key="id" :expand-on-click-node="false" :check-strictly="true" @check-change="handleCheckChange" :render-content="renderContent" :props="defaultProps">
                    </el-tree>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>

    <!--各种弹窗-->
    <Vmask :maskTitle='maskTitle' :maskData='maskData' :showMask='showMask' :maskWidth='maskWidth' @FnMask='FnMask'></Vmask>
  </div>
</template>

<script>
import axios from 'axios'

import Vmask from '@/views/components/v-mask/v-mask'
import { DeleteCityArea, SaveOrUpdatCityArea, GetWorkOrderByConditions, Code, AddWorkOrder, GetCityAreaList, LockWorkOrder, ReleaseWorkOrder, AddAdditionalComment, AddHandleComment, Roles, WorkClassList } from '@/axios/api'


export default {

  components: {

    Vmask
  },
  props: [],
  data() {
    return {
      defaultProps: {
        children: 'sysPcaList',
        label: 'pcaName'
      },
      maskTitle: '',
      maskData: {},
      showMask: false,
      maskWidth: '400px',
      treeData: [
      ],
      activeName: "1",
      // 基本配置数据
      BaseConfig: {
        isLoad: false, // 是否已经加载过此 容器 数据
        params: {
          pageSize: 5,
          pageNum: 1,
        },
        // 业务类型配置数据
        WorkClass: {
          params: {
            pageSize: 10000,
            pageNum: 1,
            name: ''
          },
          lableList: {
            WorkClassConfig: true,
            n1: "分类名称",
            operation: ["modify", "delete"],
            width: '140px'
          },
          tableData: [{
            n1: '测试名字',
          }],
          tableLoading: false,
          btnLoading: false,
          total: 0,
        },
        // 挂断原因配置数据
        Reason: {
          params: {
            pageSize: 5,
            pageNum: 1,
          },
          tableLoading: false,
          btnLoading: false,
        },
        total: 0,
        tableLoading: false,
        btnLoading: false
      },
      container: false,
      containerArr: ['BaseConfig', 'UserConfig', 'UserImport', 'SeatConfig'],
      roleList: [],
      // 弹窗数据
      mask: {
        title: '',
        data: {},
        showMask: false,
        width: '30%',
        btnLoading: false
      },
      reasonList: [],
      originReasonList: [],
      batchDeleteData: []//批量删除的数据
    }
  },

  created() {

    this.FnGetCityAreaList()
  },
  mounted() { },
  methods: {
    FnBatchDelete() {//批量删除
      if (!this.batchDeleteData.length) {
        this.$message.error("请先勾选要删除的数据");
        return
      }
      this.FnDeleteClassification(this.batchDeleteData);
    },
    // 点击树形选择器
    handleCheckChange(data, checked, indeterminate) {

      var has = false;
      this.batchDeleteData.map((v, i) => {
        if (v == data.pcaId) {
          has = true;
          this.batchDeleteData.splice(i, 1)
        }
      })
      if (!has) {
        this.batchDeleteData.push(data.pcaId)
      }
    },
    FnModify(e) {
      this.showMask = true;
      this.maskTitle = '修改';
      this.maskData = {
        defaultBox: true,
        operationNode: true,//操作节点
        modifyNode: true,//修改
        name: e.label,
        row: e
      }
    },
    append(e) {
      this.showMask = true;
      this.maskTitle = '新增节点';
      this.maskData = {
        defaultBox: true,
        operationNode: true,//操作节点
        addNode: true,//新增
        name: '',
        row: e
      }
    },
    FnDeleteClassification(e) {//删除提交

      var str = e.join(',')
      console.log(str);

      DeleteCityArea({
        idStr: str
      }).then(res => {
        if (res.state == Code) {
          this.$message.success("删除成功");
          this.showMask = false;
          this.maskData = {}
          this.FnGetCityAreaList()
        }
      })
    },
    remove(e) {//删除提示
      console.log(e)
      this.showMask = true;
      this.maskTitle = '删除提示';
      this.maskData = {
        defaultBox: true,
        defaultTitleBox: true,//
        defaultTitle: `确定删除名称为-${e.pcaName}-与旗下的所有节点吗？`,//
        removeNode: true,
        row: e
      }
      // DeleteClassification({

      // })
    },
    // 树形选择器，后面的功能按钮
    renderContent(h, { node, data, store }) {
      // console.log(data,'data')
      if (data.pcaLevel != 3) {
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
            <span>
              <el-button size="mini" type="text" on-click={() => this.append(data)}>新增下级</el-button>
              <el-button size="mini" type="text" on-click={() => this.FnModify(data)}>修改</el-button>
              <el-button size="mini" type="text" on-click={() => this.remove(data)}>删除</el-button>
            </span>
          </span>);
      } else {
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
            <span>
              <el-button size="mini" type="text" on-click={() => this.FnModify(data)}>修改</el-button>
              <el-button size="mini" type="text" on-click={() => this.remove(data)}>删除</el-button>
            </span>
          </span>);
      }
    },
    FnGetCityAreaList() {
      GetCityAreaList().then(res => {
        if (res.state == Code) {
          console.log(res);
          this.batchDeleteData = []
          this.treeData = res.data
          console.log(this.treeData);
        }
      })
    },
    loadData() {
      let activeName = this.activeName
      let container = this.container = this[this.containerArr[(activeName * 1) - 1]] // 拿 tab con 进行操作 
      container.params.pageNum = 1
      container.pparams = JSON.parse(JSON.stringify(container.params))
      if (activeName == "1" && !this.container.isLoad) {
        // 基本配置的数据 较多
        this.WorkClassSearch()
      } else if (activeName == "4" && !this.container.isLoad) {
        this.SeatConfigUserList()
      }
      this.container.isLoad = true
    },
    FnSaveOrUpdateClassification(row, name, add) {//新增或者修改节点
      console.log(row, 'row')
      console.log(name, 'name')
      console.log(add);
      if (row.pcaLevel >= 7 && add) {
        this.$Message.error("已经到上限，无法新增")
        return
      }
      // return false
      if (add) {
        SaveOrUpdatCityArea({
          //  pcaId: add ? '' : row.pcaPid,
          pcaPid: row.pcaId ? row.pcaId : '0',
          pcaName: name,
          pcaLevel: row.pcaLevel ? row.pcaLevel + 1 : '1',
          // pcaPid: row.pca_id ? row.pca_id : '0'
        }).then(res => {
          if (res.state == Code) {
            if (add) {
              this.$message.success("新增成功");
            }
            this.showMask = false;
            this.maskData = {}
            this.FnGetCityAreaList()
          }
        })
      } else {
        SaveOrUpdatCityArea({
          pcaId: row.pcaId,
          // pcaPid: row.pcaId ? row.pcaId : '0',
          pcaName: name,
          pcaLevel: row.pcaLevel,
          pcaPid: row.pcaPid
          // pcaPid: row.pca_id ? row.pca_id : '0'
        }).then(res => {
          if (res.state == Code) {
            this.$message.success("编辑成功");
            this.showMask = false;
            this.maskData = {}
            this.FnGetCityAreaList()
          }
        })
      }

    },
    FnMask(e) {
      console.log(e)
      if (e.type == 'false') {
        this.showMask = false
        this.maskData = {}
      } else if (e.type == 'true') {
        if (e.content.addNode) {//新增
          if (e.content.name === '') {
            this.$message.error("参数不能为空")
            return;
          }
          this.FnSaveOrUpdateClassification(e.content.row, e.content.name, 'add')
        } else if (e.content.modifyNode) {//修改
          this.FnSaveOrUpdateClassification(e.content.row, e.content.name)
        } else if (e.content.removeNode) {//删除
          //   console.log(e);

          this.FnDeleteClassification([e.content.row.pcaId])
        }
      }
    },
    // 工单分类表格冒泡
    WorkClassSortable(e) {
      console.log(e)
      let container = this.BaseConfig.WorkClass
      let type = e.type
      let content = e.content ? JSON.parse(JSON.stringify(e.content)) : false
      let mask = this.mask

      if (type == 'modify') {
        mask.title = '修改工单分类(' + content.row.name + ')'
        mask.showMask = true
        mask.width = '20%'
        mask.data = {
          WorkClassConfig: true,
          name: content.row.name,
          classificationId: content.row.classificationId,
        }
      } else if (type == 'delete') {
        const h = this.$createElement;
        this.$msgbox({
          title: '删除提示',
          message: h('p', null, [
            h('span', null, '你确定删除该记录吗？'),
            h('i', { style: 'color: teal' }, content.row.name)
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true
              instance.confirmButtonText = '删除中...'
              deleteUser({ ids: JSON.stringify([content.row.userId]) }).then(res => {
                if (res.state == Code) {
                  this.$Message.success('删除用户成功')
                  this.SeatConfigUserList()
                } else {
                  this.$Message.error(res.message)
                }
                done()
                instance.confirmButtonLoading = false
                instance.confirmButtonText = '确定'
              })
            } else {
              done();
            }
          }
        }).then(action => {

        });
      } else if (type == 'pageNum') {
        container.params.pageNum = content
        this.WorkClassSearch()
      }
    },
    // 工单分类搜索
    async WorkClassSearch() {
      let container = this.BaseConfig.WorkClass // 二级容器 手动赋值
      let params = JSON.parse(JSON.stringify(container.params))
      let tableData = []

      container.tableLoading = true
      let { state, data, count } = await WorkClassList({ ...params })


      if (state == Code) {

        data && data.length && (data.forEach((n1, i1) => {
          tableData.push({
            n1: n1.name, // 工单分类名称
            row: n1
          })
        }))
        data.forEach((n1, i1) => {
          n1.label = n1.name
          n1.value = n1.name
          n1.children = []
          data.forEach((n2, i2) => {
            if (n2.nodeId == n1.id) {
              n1.children.push(n2)
            }
          })
        })
        let filterData = data.filter((n1, i1) => {
          return n1.nodeId == "0"
        })
        container.reasonList = filterData
        container.tableLoading = false
      }
    },
    async ReasonSearch() {
      let container = this.BaseConfig.Reason // 二级容器 手动赋值
      container.tableLoading = true
      await this.$store.dispatch('global/setReason', { reasonList: [], originReasonList: [] })
      // await this.getReasonType()
      container.tableLoading = false
    },
    // 基本配置系列方法
    BaseConfigSortable(e) {

    },
    // 客户配置系列方法 MyTask
    UserConfigAdd() {
    },
    UserConfigDelete() {
    },
    // 客户导入系列方法
    UserImportSearch() {
    },
    UserImportShowMaskBox() {
    },
    UserImportEnter() {
    },
    UserImportLeave() { },
    // 工单分类新增
    WorkClassAppend(data) {
      let container = this.container
      let mask = this.mask
      mask.width = '20%'
      mask.showMask = true
      let data1 = {
        WorkClassConfig: true,
        name: '',
        id: false,
        nodeId: 0
      }
      // mask.title          = '新增工单分类'
      if (!data) {
        // 添加顶级
        mask.title = '添加工单分类配置(顶级)'
      } else {
        mask.title = '添加工单分类配置(' + data.name + ')'
        data1.nodeId = data.id
      }
      mask.data = data1
    },
    // 工单分类编辑
    WorkClassEdit(data) {
      let container = this.container
      let mask = this.mask
      mask.width = '20%'
      mask.showMask = true
      mask.title = '修改挂断原因(' + data.name + ')'
      mask.data = {
        WorkClassConfig: true,
        name: data.name,
        id: data.id,
        nodeId: data.nodeId
      }
    },
    // 工单分类删除
    WorkClassRemove(node, data) {
      if (node.childNodes.length && data.children.length) { return this.$Message({ message: '工单下有其他分类不能直接删除！', type: 'error' }) }
      const h = this.$createElement;
      this.$msgbox({
        title: '删除提示',
        message: h('p', null, [
          h('span', null, '你确定删除该记录吗？'),
          h('i', { style: 'color: teal' }, data.name)
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '删除中...'

            WorkClassDelete({ id: data.id }).then(res => {
              if (res.state == Code) {
                this.$Message.success('删除工单分类成功')
                this.WorkClassSearch()
              } else {
                this.$Message.error(res.message)
              }
              done()
              instance.confirmButtonLoading = false
              instance.confirmButtonText = '确定'
            })
          } else {
            done();
          }
        }
      }).then(action => {

      });
    },
    // 挂断原因添加
    ReasonAppend(data) {
      let container = this.container
      let mask = this.mask
      mask.width = '20%'
      mask.showMask = true
      let data1 = {
        Reason: true,
        name: '',
        hangupId: false,
        parentId: 0
      }
      if (!data) {
        // 添加顶级
        mask.title = '添加挂断原因(顶级)'
        mask.data = data1
      } else {
        mask.title = '添加挂断原因(' + data.name + ')'
        data1.parentId = data.hangupId
        mask.data = data1
      }
    },
    // 导入文件
    async ReasonImport(e) {
      let formData = new FormData();
      let file = e.target.files[0]
      formData.append('file', file, file.name)
      let upLoadRes = await axios.post(`/pca/importExcel`, formData, { headers: { "Content-Type": "multipart/form-data" } })
      console.log(upLoadRes, 'upLoadRes')
      if (upLoadRes.data.state == Code) {
        this.$message.success('导入成功')
        this.FnGetCityAreaList()
      }
      e.target.value = ''
    },
    // 挂断原因编辑
    ReasonEdit(data) {
      let container = this.container
      let mask = this.mask
      mask.width = '20%'
      mask.showMask = true
      mask.title = '修改挂断原因(' + data.name + ')'
      mask.data = {
        Reason: true,
        name: data.name,
        hangupId: data.hangupId,
        parentId: data.parentId
      }
    },
    // 挂断原因删除
    ReasonRemove(node, data) {
      const h = this.$createElement;
      this.$msgbox({
        title: '删除提示',
        message: h('p', null, [
          h('span', null, '你确定删除该记录吗？'),
          h('i', { style: 'color: teal' }, data.name)
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '删除中...'

            HangupReasonDelete({ hangupId: data.hangupId }).then(res => {
              if (res.state == Code) {
                this.$Message.success('删除挂断原因成功')
                this.ReasonSearch()
              } else {
                this.$Message.error(res.message)
              }
              done()
              instance.confirmButtonLoading = false
              instance.confirmButtonText = '确定'
            })
          } else {
            done();
          }
        }
      }).then(action => {

      });
    },
    ReasonRenderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node" style="padding: 7px 0; width: 100%">
          <span>{node.label}</span>
          <span style="float: right">
            <el-button size="mini" type="text" style="padding: 0 2px" on-click={() => this.ReasonAppend(data)}>添加</el-button>
            <el-button size="mini" type="text" style="padding: 0 2px" on-click={() => this.ReasonEdit(data)}>修改</el-button>
            <el-button size="mini" type="text" style="padding: 0 2px" on-click={() => this.ReasonRemove(node, data)}>删除</el-button>
          </span>
        </span>);
    },
    WorkClassRenderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node" style="padding: 7px 0; width: 100%">
          <span>{node.label}</span>
          <span style="float: right">
            <el-button size="mini" type="text" style="padding: 0 2px" on-click={() => this.WorkClassAppend(data)}>添加</el-button>
            <el-button size="mini" type="text" style="padding: 0 2px" on-click={() => this.WorkClassEdit(data)}>修改</el-button>
            <el-button size="mini" type="text" style="padding: 0 2px" on-click={() => this.WorkClassRemove(node, data)}>删除</el-button>
          </span>
        </span>);
    },
    SeatConfigRenderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node" style="padding: 7px 0; width: 100%">
          <span>{node.label}</span>
          <span style="float: right">
            <el-button size="mini" type="text" style="padding: 0 2px" on-click={() => this.SeatConfigAppend(data)}>添加</el-button>
            <el-button size="mini" type="text" style="padding: 0 2px" on-click={() => this.SeatConfigEdit(data)}>修改</el-button>
            <el-button size="mini" type="text" style="padding: 0 2px" on-click={() => this.SeatConfigRemove(node, data)}>删除</el-button>
          </span>
        </span>);
    },
    SeatConfigClickNode(a, b, c) {

    },
    async SeatConfigSortable(e) {
      console.log(e)
      let container = this.container
      let type = e.type
      let content = e.content ? JSON.parse(JSON.stringify(e.content)) : false
      let mask = this.mask
      if (type == 'modify') {
        let obj = content.row
        let { state, data, msg } = await Roles({ userId: obj.userId })
        if (state == Code) {
          data && data.forEach((n1, i1) => {
            n1.label = n1.remark
            n1.value = n1.roleId
          })
          mask.showMask = true
          mask.title = '修改基本信息'
          mask.data = {
            id: obj.userId,
            SeatConfigAdd: true,
            username: obj.username,
            order_no: obj.orderNo,
            password: obj.password,
            sex: String(obj.sex),
            email: obj.email,
            mobile: obj.mobile,
            roleId: data.map(n => n.roleId),
            roleList: this.roleList
          }
        }

      } else if (type == 'delete') {
        var userList = [content.row.userId]
        this.$confirm('确认删除【' + content.row.username + '】吗？').then(_ => {
          deleteUser({ data: userList }).then(res => {
            if (res.state == Code) {
              this.$message.success('删除成功')
              this.SeatConfigUserList()
            } else {
              this.$message.error('删除失败')
            }
          })
        }).catch(_ => {
        })
      } else if (type == 'pageNum') {
        container.params.pageNum = content
        this.SeatConfigUserList()
      } else if (type == 'pageSize') {
        container.params.pageNum = 1
        container.params.pageSize = content
        this.SeatConfigUserList()
      }
    },
    SeatConfigAdd() {
      let mask = this.mask
      mask.showMask = true
      mask.title = '添加员工'
      mask.width = '34%'
      mask.data = {
        SeatConfigAdd: true,
        username: '',
        order_no: '',
        password: '',
        roleId: [],
        roleList: this.roleList,
        sex: "1",
        email: '',
        mobile: ''
      }
    },
    async SeatConfigUserList() {
      let container = this.container
      let params = JSON.parse(JSON.stringify(container.pparams))
      let tableData = []
      container.tableLoading = true
      let { state, data, msg, count } = await UserList({ ...params })
      if (state == Code) {
        data && data.length && (data.forEach((n1, i1) => {
          tableData.push({
            n1: n1.orderNo,
            n2: n1.agentId,
            n3: n1.username,
            n4: n1.sex == '1' ? '男' : '女',
            n5: n1.createTime ? this.$Utils.myParseTime(n1.createTime) : '',
            row: n1
          })
        }))
        this.container.tableData = tableData
        this.container.total = count
      }
    },
    getRoles() {
      Roles().then(res => {
        if (res.state == Code) {
          res.data && res.data.forEach((n1, i1) => {
            n1.label = n1.remark
            n1.value = n1.roleId
          })
          this.roleList = res.data
        }
      })
    }
  },
  computed: {
    // ...mapGetters(['getBtnList'])
  },
  watch: {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
.config {
  .row-item {
    margin-bottom: 10px;
  }
  .base-config {
    .tree-wrap {
      padding-top: 17px;
      /* overflow-y: scroll;
        overflow-x: hidden */
    }
    .col {
    }
    h4 {
      padding: 0 10px;
      font-size: 16px;
      color: #333;
    }
  }
  .user-config {
    .content {
      padding: 15px;
      .customer-template-title {
        font-weight: 700;
        margin-bottom: 15px;
        font-size: 16px;
      }
      .row {
        padding-left: 0;
        margin: 0 30px 15px 0;
        .row-item {
          .row-item-text {
            position: relative;
            min-width: 150px;
            max-width: 150px;
            height: 30px;
            border: 1px solid #ccc;
            display: inline-block;
            border-radius: 3px;
            line-height: 30px;
            padding: 0 8px;
            .row-item-edit {
              position: absolute;
              right: 25px;
              top: 8px;
              width: 15px;
              height: 15px;
              /* background: url('../../assets/images/modify.png') center top no-repeat; */
              background-size: 75%;
              cursor: pointer;
            }
            .row-item-delete {
              background-size: 100%;
              right: 5px;
              /* background: url('../../assets/images/delete.png') center top no-repeat; */
            }
            .beyond-hiding {
              width: 80%;
            }
          }
          .modify-text {
            color: #409eff;
            margin-left: 10px;
          }
        }
        .el-checkbox {
          margin-bottom: 15px;
          .tips-text {
            color: #ccc;
          }
        }
        .default-color {
          display: inline-block;
          line-height: 30px;
        }
      }
    }
  }
  .user-import {
    .content {
      .mask-box {
        .box {
          width: 400px;
          .header {
            padding: 0 15px;
            height: 40px;
            border-bottom: 1px solid #99a9bf;
            span {
              line-height: 40px;
            }
            i {
              font-size: 16px;
              margin-top: 12px;
              cursor: pointer;
            }
          }
          .row {
            line-height: 30px;
            margin: 5px 0;
            .row-item {
              .row-item-title {
                vertical-align: middle;
                width: 90px;
                text-align: right;
              }
              .span-file {
                width: 85px;
                position: relative;
                display: inline-block;
                overflow: hidden;
                vertical-align: middle;
                height: 28px;
                cursor: pointer;
                button,
                input {
                  cursor: pointer;
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                }
                input {
                  opacity: 0;
                  border: 0;
                }
              }
            }
            .up-load-name {
              padding-left: 15px;
              text-align: left !important;
              width: 150px !important;
            }
          }
          .row-template {
            margin-left: 80px;
            color: #409eff;
          }
          .footer {
            border-top: 1px solid #99a9bf;
            height: 40px;
            button {
              margin-top: 5px;
              margin-right: 15px;
            }
          }
        }
      }
      padding: 10px 10px 15px;
      .condition {
        .row {
          margin-bottom: 15px;
          .row-item-border {
            span {
              cursor: pointer;
              padding: 0 10px;
              display: block;
            }
            border: 1px solid #dcdfe6;
            border-radius: 3px;
            line-height: 30px;
            position: relative;
            .i-tips {
              position: absolute;
              right: -34px;
              top: 50%;
              margin-top: -8px;
              font-size: 16px;
              cursor: pointer;
              .i-tips-box {
                z-index: 99;
                position: absolute;
                width: 400px;
                background-color: #000;
                opacity: 0.7;
                top: -10px;
                right: -412px;
                border-radius: 3px;
                color: #fff;
                padding: 8px;
                display: none;
                p {
                  line-height: 20px;
                  opacity: 0.9;
                }
                &::before {
                  content: " ";
                  position: absolute;
                  top: 10px;
                  border: 8px solid transparent;
                  border-right-color: #000;
                  left: -16px;
                }
              }
            }
          }
        }
      }
      .customer-introduction-table {
        background-color: rgb(251, 251, 251);
        .customer-introduction-table-content {
          width: 40%;
          min-width: 485px;
          background-color: #fff;
          .customer-introduction-table-content-list {
            width: 100%;
            .list-box {
              border-bottom: 1px solid #ccc;
              border-left: 5px solid transparent;
              height: 55px;
              padding-left: 10px;
              transition: all 1s;
              .list-box-l {
                color: #666;
                line-height: 55px;
              }
              .list-box-r {
                margin-top: 8px;
                text-align: right;
                padding-right: 25px;
                .list-box-r-state {
                  color: rgb(46, 191, 146);
                }
                .list-box-r-time {
                  color: #999;
                }
              }
            }
            .item-active {
              background-color: rgb(251, 251, 251);
              border-left: 5px solid #409eff;
            }
            .item-active-null {
              border-left: 5px solid transparent;
            }
          }
        }
        .customer-introduction-table-details {
          width: 46%;
          padding: 25px;
          max-height: 500px;
          overflow: auto;
          .details-box {
            .details-box-title {
              line-height: 40px;
              .details-box-title-pc {
              }
              .details-box-title-num {
                font-weight: 700;
                margin: 0 5px;
              }
              .details-box-title-state {
                color: rgb(46, 191, 146);
              }
            }

            .details-list {
              .details-list-title {
                border-bottom: 1px solid #ccc;
                line-height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                span {
                  font-weight: 700;
                  flex: 1;
                }
              }
              .details-list-cont {
                border-bottom: 1px solid #ccc;
                line-height: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
                span {
                  flex: 1;
                }
                .details-list-cont-data-null {
                  text-align: center;
                }
              }
            }
          }
        }
      }
      .table-paging {
        text-align: left;
        margin-top: 15px;
      }
    }
  }
  .seat-config {
    // .content-left {
    //   width: 40%
    // }
    .content-right {
      width: 100%;
      padding-left: 15px;
      padding-right: 15px;
    }
  }
  .file {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    opacity: 0;
    z-index: 99;
    cursor: pointer;
  }
}
</style>
